<script setup lang="ts">
import BarChart from './components/BarChart.vue'
import DonutChart from './components/DonutChart.vue'
import FunnelChart from './components/FunnelChart.vue'
import GaugeChart from './components/GaugeChart.vue'
import LineChart from './components/LineChart.vue'
import LiquidFillChart from './components/LiquidFillChart.vue'
import MiniLineChart from './components/MiniLineChart.vue'
import PieChart from './components/PieChart.vue'
import RadarChart from './components/RadarChart.vue'
import ScatterChart from './components/ScatterChart.vue'
import StackedBarChart from './components/StackedBarChart.vue'

definePage({
  name: 'echarts',
  style: {
    navigationBarTitleText: 'Echarts 演示',
  },
})

const router = useRouter()

function navigateToAsync() {
  router.push({
    name: 'echartsAsync',
  })
}
</script>

<template>
  <view class="page-container">
    <!-- 异步 Echarts 入口 -->
    <view class="chart-card">
      <view class="async-entry" @click="navigateToAsync">
        查看异步 Echarts 示例
      </view>
    </view>
    <!-- 饼图 -->
    <view class="chart-card">
      <view class="chart-title">
        饼图示例
      </view>
      <PieChart />
    </view>

    <!-- 柱状图 -->
    <view class="chart-card">
      <view class="chart-title">
        柱状图示例
      </view>
      <BarChart />
    </view>

    <!-- 折线图 -->
    <view class="chart-card">
      <view class="chart-title">
        折线图示例
      </view>
      <LineChart />
    </view>

    <!-- 雷达图 -->
    <view class="chart-card">
      <view class="chart-title">
        雷达图示例
      </view>
      <RadarChart />
    </view>

    <!-- 散点图 -->
    <view class="chart-card">
      <view class="chart-title">
        散点图示例
      </view>
      <ScatterChart />
    </view>

    <!-- 环形图 -->
    <view class="chart-card">
      <view class="chart-title">
        环形图示例
      </view>
      <DonutChart />
    </view>

    <!-- 漏斗图 -->
    <view class="chart-card">
      <view class="chart-title">
        漏斗图示例
      </view>
      <FunnelChart />
    </view>

    <!-- 仪表盘图 -->
    <view class="chart-card">
      <view class="chart-title">
        仪表盘示例
      </view>
      <GaugeChart />
    </view>

    <!-- 迷你折线图 -->
    <view class="chart-card">
      <view class="chart-title">
        迷你折线图示例
      </view>
      <MiniLineChart />
    </view>

    <!-- 堆叠柱状图 -->
    <view class="chart-card">
      <view class="chart-title">
        堆叠柱状图示例
      </view>
      <StackedBarChart />
    </view>

    <!-- 水球图 -->
    <view class="chart-card">
      <view class="chart-title">
        水球图示例
      </view>
      <LiquidFillChart />
    </view>
  </view>
</template>

<style scoped>
.page-container {
  background-color: #f8f9fa;
  padding: 40rpx;
}

.chart-card {
  margin-bottom: 40rpx;
  border-radius: 24rpx;
  background-color: #ffffff;
  padding: 40rpx;
  box-shadow: 0 8rpx 12rpx rgba(0, 0, 0, 0.05);
}

.async-entry {
  border-radius: 16rpx;
  background-color: #3b82f6;
  padding: 24rpx 48rpx;
  color: #ffffff;
  font-weight: 500;
  transition: background-color 0.3s;
}

.async-entry:hover {
  background-color: #2563eb;
}

.chart-title {
  margin-bottom: 40rpx;
  text-align: center;
  font-size: 32rpx;
  color: #333333;
  font-weight: 500;
}
</style>
